<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="reset.css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="index.css" />
    <script src="index.js"></script>
    <title>VoxelAir</title>
  </head>

  <body>
    <section id="wrap">
      <div id="mask">
        <div class="up"></div>
        <div class="down"></div>
        <div class="line"></div>
      </div>
      <header id="head">
        <div class="headMain">
          <h1 class="logo">
            <a href="index.html">
              <img src="./imgs/logo.png" />
            </a>
          </h1>
          <nav class="nav clearfix">
            <ul class="clearfix">
              <li>
                <a href="javascript:;">
                  <div class="up">
                    <img src="./imgs/home_gruen.png" alt="" />
                  </div>
                  <div class="down">
                    <img src="./imgs/home.png" alt="" />
                  </div>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <div class="up">课程</div>
                  <div class="down">课程</div>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <div class="up">Works</div>
                  <div class="down">Works</div>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <div class="up">About</div>
                  <div class="down">About</div>
                </a>
              </li>
              <li>
                <a href="javascript:;">
                  <div class="up">Team</div>
                  <div class="down">Team</div>
                </a>
              </li>
            </ul>
          </nav>
          <div class="music">
            <audio src="./imgs/heart.mp3" loop></audio>
          </div>
          <div class="arrow"></div>
        </div>
      </header>
      <section id="content">
        <ul class="list">
          <li class="home">
            <section>
              <ul class="home1">
                <li class="commonTitle active">
                  <div class="item">one layer</div>
                </li>
                <li class="commonTitle">
                  <div class="item">two layer</div>
                </li>
                <li class="commonTitle">
                  <div class="item">three layer</div>
                </li>
                <li class="commonTitle">
                  <div class="item">four layer</div>
                </li>
              </ul>
              <ul class="home2">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
            </section>
          </li>
          <li class="course">
            <section>
              <header class="course1 commonTitle">
                <span class="">EINIGE</span><br />
                <span>UNSERER</span><br />
                <span>KUNDEN</span>
              </header>
              <div class="course2 commonText">
                <p>
                  Das Kundenvertrauen in unsere Kompetenz ist die notwendige
                  Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber
                  auch das größte Lob, das man uns entgegenbringen kann.
                </p>
                <p>
                  Diese und viele weitere große und kleine Kunden vertrauen uns
                  seit Jahren, was uns stolz macht, und dafür sagen wir an
                  dieser Stelle einfach mal.
                </p>
              </div>
              <div class="course3">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光asfafsafsa</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
                <div class="item">
                  <div class="backFace"></div>
                  <div class="face">床前明月光</div>
                </div>
              </div>
              <div class="plane1"></div>
              <div class="plane2"></div>
              <div class="plane3"></div>
            </section>
          </li>
          <li class="works">
            <section>
              <header class="works1 commonTitle">
                <span>EINBLICK</span><br />
                <span>ERKENNTNIS</span><br />
                <span>ERGRBNIS</span><br />
              </header>
              <div class="works2">
                <div class="item">
                  <img src="./imgs/worksimg1.jpg" />
                  <div class="mask">
                    <span>别人笑我太疯癫，我笑他人看不穿</span>
                    <div class="icon"></div>
                  </div>
                </div>
                <div class="item">
                  <img src="./imgs/worksimg2.jpg" />
                  <div class="mask">
                    <span>别人笑我太疯癫，我笑他人看不穿</span>
                    <div class="icon"></div>
                  </div>
                </div>
                <div class="item">
                  <img src="./imgs/worksimg3.jpg" />
                  <div class="mask">
                    <span>How are you?</span>
                    <div class="icon"></div>
                  </div>
                </div>
                <div class="item">
                  <img src="./imgs/worksimg4.jpg" />
                  <div class="mask">
                    <span>How are you?</span>
                    <div class="icon"></div>
                  </div>
                </div>
              </div>
              <div class="works3"></div>
              <div class="pencel1"></div>
              <div class="pencel2"></div>
              <div class="pencel3"></div>
            </section>
          </li>
          <li class="about">
            <section>
              <header class="about1 commonTitle">
                <span>DIE</span><br />
                <span>SPEZIELLE</span><br />
                <span>VIELFALT</span><br />
              </header>
              <div class="about2 commonText">
                <p>
                  Der bunte Medienmix ist die Faszination die uns antreibt und
                  das, was man an uns schätzt. Von A bis Z und von vorne bis
                  hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen
                  es zu etwas Großartigem heranwachsen.
                </p>
              </div>
              <div class="about3">
                <div class="item">
                  <span></span>
                  <ul data-src="./imgs/about1.jpg"></ul>
                </div>
                <div class="item">
                  <span></span>
                  <ul data-src="./imgs/about3.jpg"></ul>
                </div>
              </div>
              <div class="about4"></div>
            </section>
          </li>
          <li class="team">
            <section>
              <header class="team1 commonTitle">
                <span>WIR SIND</span><br />
                <span>VOXELAIR</span><br />
              </header>
              <div class="team2">
                <p class="commonText">
                  Wir sind seit 2002 eine Full-Service-Werbeagentur mit
                  Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe.
                </p>
                <p class="commonText">
                  Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team.
                  Dabei hat jedes Voxel neben professionellem Allroundwissen
                  auch sein ganz spezielles Gebiet, um selbst die
                  individuellsten Kundenwünsche schnell und kompetent
                  umzusetzen.
                </p>
              </div>
              <div class="team3">
                <ul>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                  <li></li>
                </ul>
              </div>
            </section>
          </li>
        </ul>
        <ul class="dot">
          <li class="active"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </section>
  </body>
</html>
